<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>场馆资料</title>

		<style>
			.content ul{
				padding: 10px 0;
				margin-bottom: 10px;
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				background-color: #fff;
			}
			.content ul:first-child{
				border-top: none;
			}
			/* common title */
			.title{
				font-size: 0;
				padding-bottom: 4px;
				padding-left: 10px;
			}
			.left-border{
				display: inline-block;
				width: 5px;
				height: 16px;
				margin-right: 5px;
				background-image: url(../images/icons/purpose_title.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.title .sub-title{
				font-size: 14px;
				color: #53ceca;
				vertical-align: top;
			}
			/* slider */
			div.slide{
				position: relative;
				height: 130px;
				width: 100%;
			}
			ul.slide-wraper{
				width: 100%;
				height: 130px;
				padding: 0;
				margin: 0;
				border: none;
				white-space: nowrap;
				overflow: hidden;
			}
			ul.slide-wraper li{
				display: inline-block;
				width: 100%;
				height: 130px;
			}
			ul.slide-wraper li img{
				display: inline-block;
				width: 100%;
				height: 130px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.b-position{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 10px 15px;
			}
			.b-position .left{
				float: left;
			}
			.b-position .venue{
				font-size: 16px;
				color: #fff;
				line-height: 20px;
			}
			.b-position .right{
				float: right;
			}
			.b-position ul.dot{
				padding: 0;
				margin: 0;
				border: none;
				background-color: inherit;
				font-size: 0;
				margin-top: 10px;
			}
			.b-position .dot li{
				display: inline-block;
				width: 5px;
				height: 5px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-color: #b4b4b4;
				margin: 0 5px;
			}
			.b-position .dot li.active{
				background-color: #fff;
			}
			/* addr */
			ul.addr{
				padding: 0;
				padding-top: 10px;
			}
			ul.addr li{
				padding: 0px 15px;
				padding-bottom: 10px;
				font-size: 14px;
			}
			/* 已开课程 */
			ul.open-cource li{
				padding: 7px 15px;
				overflow: hidden;
				font-size: 14px;
			}
			.open-cource .left{
				float: left;
				font-size: 0;
				margin-top: 4px;
			}
			.open-cource .l-class{
				font-size: 14px;
				margin-right: 8px;
			}
			.open-cource .l-identy span{
				border: none;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				color: #fff;
				font-size: 12px;
				padding: 2px;
				margin-right: 5px;
			}
			.identy-a{
				background-color: #53ceca
			}
			.identy-b{
				background-color: #fab345;
			}
			.open-cource .right{
				float: right;
			}
			.open-cource .r-money{
				font-size: 0;
			}
			.r-money .money-icon{
				font-size: 13px;
				margin-right: 3px;
			}
			.r-money .money{
				font-size: 14px;
			}
			.open-cource a.link{
				display: inline-block;
				padding: 4px 5px;
				background-color: #53ceca;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				color: #fff;
			}
			/*** 已开课程 查看更多 ***/
			.open-cource .look-more p{
				font-size: 14px;
				color: #53ceca;
				text-align: center;
				padding-top: 10px;
				border-top: 1px solid #dcdcdc;
			}
			.look-more ul.more{
				padding: 0;
				margin: 0;
				border: none;
			}
			/* 场馆设施 */
			ul.facility li{
				padding: 7px 15px;
				text-align: center;
				font-size: 0;
			}
			ul.facility .f-item{
				display: inline-block;
				margin: 0 5px;
			}
			.facility .f-icon{
				display: block;
				width: 40px;
				height: 40px;
				margin-bottom: 5px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.facility .wifi{
				background-image: url(../images/icons/icon_wifi.png);
			}
			.facility .lock{
				background-image: url(../images/icons/icon_locker.png);
			}
			.facility .shower{
				background-image: url(../images/icons/icon_shower.png);
			}
			.facility .park{
				background-image: url(../images/icons/icon_parking.png);
			}
			.facility .f-name{
				text-align: center;
				font-size: 13px;
			}
			/* 场馆星级 */
			.star-level .level{
				padding: 10px 0;
				margin-top: 7px;
				border-top: 1px solid #dcdcdc;
				overflow: hidden;
			}
			ul.lv-item{
				float: left;
				padding: 0 15px;
				margin: 0;
				border: none;
				border-right: 1px solid #dcdcdc;
			}
			ul.lv-item li{
				padding: 5px;
				font-size: 0;
			}
			.lv-item .w{
				margin-right: 8px;
				font-size: 13px;
			}
			.lv-item .star{
				display: inline-block;
				width: 10px;
				height: 10px;
				margin-right: 2px;
				background-image: url(../images/icons/star_small_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.lv-item .star.select{
				background-image: url(../images/icons/star_small_s.png);
			}
			.lv-item .grade{
				font-size: 13px;
				margin-left: 5px;
			}
			div.lv-compre{
				float: left;
				padding: 10px 15px;
			}
			.lv-compre p{
				margin-top: 9px;
				margin-bottom: 5px;
				font-size: 13px;
			}
			.lv-compre .stars{
				font-size: 0;
			}
			.lv-compre .star{
				display: inline-block;
				width: 14px;
				height: 14px;
				margin-right: 5px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url(../images/icons/star_normal_uns.png);
			}
			.lv-compre .star.select{
				background-image: url(../images/icons/star_normal_s.png);
			}
			.lv-compre .grade{
				font-size: 14px;
			}
			/*** 场馆星级 评价 ***/
			ul.level-evaluate{
				padding: 0 15px;
			}
			ul.level-evaluate li{
				padding: 7px 0;
				border-bottom: 1px solid #dcdcdc;
				overflow: hidden;
			}
			ul.level-evaluate li:last-child{
				border-bottom: none;
			}
			.level-evaluate .stu-avatar{
				float: left;
				width: 40px;
				height: 40px;
				margin-right: 10px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.level-evaluate .stu-avatar img{
				display: inline-block;
				width: 100%; 
				height: 100%;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.level-evaluate .stu{
				float: left;
				margin-top: 3px;
				width: 80%;
			}
			.level-evaluate .stu-info{
				font-size: 13px;
				overflow: hidden;
			}
			.level-evaluate .stu-info .name,
			.level-evaluate .stu-info .stars{
				float: left;
			}
			.level-evaluate .stu-info .date{
				float: right;
			}
			.level-evaluate .stu-info .name,
			.level-evaluate .stu-info .date{
				color: #b4b4b4;
			}
			.level-evaluate .stu-info .stars{
				margin-left: 10px;
			}
			.level-evaluate .stu-info .star{
				display: inline-block;
				width: 13px;
				height: 13px;
				background-image: url(../images/icons/star_small_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.level-evaluate .stu-info .star.select{
				background-image: url(../images/icons/star_normal_s.png);
			}
			.level-evaluate .stu-evalu{
				margin-top: 5px;
				font-size: 13px;
			}
			.star-level .look-more{
				display: block;
				text-align: center;
				color: #53ceca;
				font-size: 14px;
				text-decoration: none;
			} 
			/* 评价 */
			ul.evaluate-link{
				padding: 10px 15px;
			}
			ul.evaluate-link li a{
				display: block;
				overflow: hidden;
				color: #42455c;
			}
			.evaluate-link .left{
				float: left;
				font-size: 14px;
			}
			.evaluate-link .arrow{
				float: right;
				display: inline-block;
				width: 11px;
				height: 16px;
				background-image: url(../images/icons/arrow_in.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<div class="content">
		<!-- slider -->
		<div class="slide">
			<ul class="slide-wraper">
				<li><img src="../images/teacher.png" alt=""></li>
				<li><img src="../images/1.png" alt=""></li>
				<li><img src="../images/2.png" alt=""></li>
				<li><img src="../images/avatar.jpg" alt=""></li>
			</ul>
			<div class="b-position">
				<p class="left venue">朝阳公园会馆</p>
				<ul class="right dot">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<!-- addr -->
		<ul class="addr">
			<li>朝阳公园南路1号网球中心</li>
			<li>010-12345678</li>
		</ul>
		<!-- 已开课程 -->
		<ul class="open-cource">
			<div class="title">
				<span class="left-border"></span>
				<span class="sub-title">已开课程</span>
			</div>
			<li>
				<span class="left">
					<span class="l-class">减肥塑形课</span>
					<span class="l-identy">
						<span class="identy-a">团</span>
						<span class="identy-b">初级</span>
					</span>
				</span>
				<span class="right">
					<span class="r-money"><span class="money-icon">¥</span><span class="money">200</span></span>
					<a class="link" href="">我要上课</a>
				</span>
			</li>
			<li>
				<span class="left">
					<span class="l-class">白领脊背修复套餐</span>
					<span class="l-identy">
						<span class="identy-a">企</span>
					</span>
				</span>
				<span class="right">
					<span class="r-money"><span class="money-icon">¥</span><span class="money">6,000</span></span>
					<a class="link" href="">我要预约</a>
				</span>
			</li>
			<!-- 已开课程查看更多 -->
			<div class="look-more">
				<p class="">查看更多</p>
				<ul class="more" style="display: none;">
					<li>
						<span class="left">
							<span class="l-class">减肥塑形课</span>
							<span class="l-identy">
								<span class="identy-a">团</span>
								<span class="identy-b">初级</span>
							</span>
						</span>
						<span class="right">
							<span class="r-money">¥200</span>
							<a class="link" href="">我要上课</a>
						</span>
					</li>	
				</ul>
			</div>
		</ul>
		<!-- 场馆设施 -->
		<ul class="facility">
			<div class="title">
				<span class="left-border"></span>
				<span class="sub-title">场馆设施</span>
			</div>
			<li>
				<span class="f-item">
					<span class="f-icon wifi"></span>
					<span class="f-name">wifi</span>
				</span>
				<span class="f-item">
					<span class="f-icon lock"></span>
					<span class="f-name">锁柜</span>
				</span>
				<span class="f-item">
					<span class="f-icon shower"></span>
					<span class="f-name">淋浴</span>
				</span>
				<span class="f-item">
					<span class="f-icon park"></span>
					<span class="f-name">停车</span>
				</span>
			</li>
		</ul>
		<!-- 场馆星级 -->
		<ul class="star-level">
			<div class="title">
				<span class="left-border"></span>
				<span class="sub-title">场馆星级</span>
			</div>
			<div class="level">
				<ul class="lv-item">
					<li>
						<span class="w">环境</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
					<li>
						<span class="w">服务</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
					<li>
						<span class="w">教学</span>
						<span class="stars">
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star select"></span>
							<span class="star"></span>
							<span class="grade">4.5</span>
						</span>
					</li>
				</ul>
				<div class="lv-compre">
					<p>综合</p>
					<p class="stars">
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star"></span>
						<span class="grade">4.5</span>
					</p>
				</div>
			</div>
			<ul class="level-evaluate">
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳馆环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
				<li>
					<div class="stu-avatar">
						<img src="../images/avatar.jpg" alt="">
					</div>
					<div class="stu">
						<p class="stu-info">
							<span class="name">王佳</span>
							<span class="stars">
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
								<span class="star select"></span>
							</span>
							<span class="date">2015.08.18</span>
						</p>
						<p class="stu-evalu">朝阳馆环境超好，服务也很棒，老师特别专业！</p>
					</div>
				</li>
			</ul>
			<a class="look-more" href="">查看更多</a>
		</ul>
		<!-- 评价 -->
		<ul class="evaluate-link">
			<li>
				<a href="">
					<span class="left">去过场馆？快进来评价一下吧！</span>
					<span class="right arrow"></span>
				</a>
			</li>
		</ul>
	</div>
</html>